<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景</title>
		<style>
			body{
				width: 100%;
				height: 1200vh;
				/* background-repeat: no-repeat;
				background-image: url(img/OIP-C.jpg);
				background-attachment: scroll;
				 background-position:20%; */
				/* background-position: right bottom; */
				/* 背景随着页面滚动：scroll，默认值
				 页面滚动而背景不动：fixed
				 background-attachment: scroll;*/
				 /* 符合写法:background:颜色 图片 重复类型 位置/大小（center/100% 100%）; */
				 background: rgba(126, 255, 135, 0.7) url(img/OIP-C.jpg) fixed center/100% 100%;
			}
			.box{
				width: 900px;
				height: 1200px;
				background-color: rgba(126, 255, 135, 0.6);/* 透明度：取值范围在0~1之间，如果为0.x，可以省略0比如“0.6”可以写成“.6” */);
			/* transparent:透明度 */
			/* 如果颜色是#ffaa33可以省略为#fa3 */
			background-image: url(img/OIP-C.jpg);/* 背景图片:类似盒子的内容 */
			/* 背景图片重复显示：repeat
			 背景图片不重复显示：no-repeat
			 背景图片横向重复：repeat-x
			 背景图片纵向重复：repeat-y*/
			 background-repeat: no-repeat;  
			font-size: 36 px;
			border: 1px solid green;
			
			}
		</style>
	</head>
	<body>
		<div class="box">
			这是盒子的内容！
		</div>
	</body>
</html>
